@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.33.5/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.33.5/dist/theme-default.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css';

html,
body,
#app {
  margin: 0;
  block-size: 100%;
}

#app {
  color: #2c3e50;
  font-family: 'JetBrains Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  text-transform: uppercase;
}

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}

/* 基础 */
.basicflow.dark{background:#000;color:#fffffb}.basicflow.dark .vue-flow__node{background:hsl(0deg,0%,10%);color:#fffffb}.basicflow.dark .vue-flow__node.selected{border:1px solid hotpink;background:hsl(0deg,0%,20%)}.basicflow .vue-flow__controls{display:flex;flex-wrap:wrap;justify-content:center}.basicflow.dark .vue-flow__controls{border:1px solid #FFFFFB}.basicflow .vue-flow__controls .vue-flow__controls-button{border:none;border-inline-end:1px solid #eee}.basicflow.dark .vue-flow__controls .vue-flow__controls-button{border:none;background:hsl(0deg,0%,20%);fill:#fffffb}.basicflow.dark .vue-flow__controls .vue-flow__controls-button:hover{background:hsl(0deg,0%,30%)}.basicflow.dark .vue-flow__edge-textbg{fill:#292524}.basicflow.dark .vue-flow__edge-text{fill:#fffffb}



/* 拖拽 */
.dndflow{display:flex;flex-direction:column;block-size:100%}.dndflow aside{background:rgba(16,185,129,75%);border-inline-end:1px solid #eee;box-shadow:0 5px 10px 0 rgba(0,0,0,30%);box-shadow:0 5px 10px #0000004d;color:#fff;font-size:12px;font-weight:700;padding-block:15px;padding-inline:10px}.dndflow aside .nodes>*{box-shadow:5px 5px 10px 2px rgba(0,0,0,25%);box-shadow:5px 5px 10px 2px #00000040;cursor:grab;font-weight:500;margin-block-end:10px}.dndflow aside .description{margin-block-end:10px}.dndflow .vue-flow-wrapper{flex-grow:1;block-size:100%}

@media screen and (min-width: 640px){.dndflow{flex-direction:row}.dndflow aside{min-inline-size:25%}}

@media screen and (max-width: 639px){.dndflow aside .nodes{display:flex;flex-direction:row;gap:5px}}


/* 与视口和图形交互和限制交互的选项 */
.interactionflow .controls{position:absolute;z-index:4;padding:8px;background-color:#d3d3d3;border-end-end-radius:10px;font-size:11px;inset-block-start:0;inset-inline-start:0}.interactionflow .controls .label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:5px}.interactionflow .controls .label input{cursor:pointer}


